<template>
  <div class="coupon-main">
    <div class="homeSwiper">
      <HomeSwiper
        :imgs="[
          publicUrl(`/images/coupon-banner.jpg`),
          publicUrl(`/images/coupon-banner.jpg`),
          publicUrl(`/images/coupon-banner.jpg`),
        ]"
      />
    </div>

    <div class="coupon-content">
      <div class="coupon-title">
        优惠好卷等你来拿
        <div class="bottom-dir"></div>
      </div>

      <div class="coupon-list">
        <div class="coupon-part" v-for="(item, index) in coupon_list">
          <div class="coupon-bg">
            <img v-lazy="publicUrl(`/images/coupon.jpg`)" />
          </div>
          <div class="center">
            <div class="img"><img v-lazy="item.img" /></div>
            <div class="right">
              <div class="right-top">
                <div><span>￥</span>{{ item.discounts }}</div>
                <div :title="item.condition">
                  <span class="overOne">{{ item.condition }}</span>
                </div>
              </div>
              <div class="right-bottom overTwo" :title="item.describe">
                {{ item.describe }}
              </div>
            </div>
          </div>

          <div
            :class="['right-button', 'thumb', item.is_get ? `get` : `noget`]"
            @click="() => get(item, index)"
          >
            {{ item.is_get ? `已领取` : `立即领取` }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts" name="">
import { ref } from "vue";
import HomeSwiper from "@/components/HomeSwiper/index.vue";
import { publicUrl } from "@/utils/util";
import { toast } from "vue3-toastify";
interface CouponItem {
  condition: string;
  discounts: number;
  img: string;
  describe: string;
  is_get: 1 | 0;
}
const coupon_list = ref<Array<CouponItem>>([
  {
    condition: "满200元可用",
    discounts: 50,
    img: publicUrl(`/images/mtm-shirt.jpg`),
    describe: "仅限购买现货产品、MTM产品、 固话款产品可用",
    is_get: 0,
  },
  {
    condition: "满200元可用",
    discounts: 50,
    img: publicUrl(`/images/mtm-shirt.jpg`),
    describe:
      "仅限购买现货产品、MTM产品、 固话款产品可用仅限购买现货产品、MTM产品、 固话款产品可用",
    is_get: 1,
  },
  {
    condition: "满200元可用满200元可用满200元可用",
    discounts: 50,
    img: publicUrl(`/images/mtm-shirt.jpg`),
    describe: "仅限购买现货产品、MTM产品、 固话款产品可用",
    is_get: 1,
  },
  {
    condition: "满200元可用",
    discounts: 50,
    img: publicUrl(`/images/mtm-shirt.jpg`),
    describe: "仅限购买现货产品、MTM产品、 固话款产品可用",
    is_get: 1,
  },
  {
    condition: "满200元可用",
    discounts: 50,
    img: publicUrl(`/images/mtm-shirt.jpg`),
    describe: "仅限购买现货产品、MTM产品、 固话款产品可用",
    is_get: 1,
  },
  {
    condition: "满200元可用",
    discounts: 50,
    img: publicUrl(`/images/mtm-shirt.jpg`),
    describe: "仅限购买现货产品、MTM产品、 固话款产品可用",
    is_get: 0,
  },
]);
const get = (item: CouponItem, index: number) => {
  if (item.is_get) return toast.error(`请勿重复领取优惠卷`);
  coupon_list.value[index].is_get = 1;
  toast.success(`领取成功`);
};
</script>
<style scoped lang="scss">
@media screen and (min-width: $pc-min-width) {
  @import "./pc.scss";
}
</style>
